<template>
  <div class="box">
    <div class="aa">
      <div class="abc">
        <!-- 面包屑 -->
        <a-breadcrumb>
          <a-breadcrumb-item>关联收文</a-breadcrumb-item>
          <a-breadcrumb-item>发文</a-breadcrumb-item>
          <a-breadcrumb-item>培训预算</a-breadcrumb-item>
          <a-breadcrumb-item><span @click="pop">会议预算</span>
          </a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <!-- 列表 -->
      <div class="list">
        <ul v-for="(item,index) in lists" :key="index">
          <li>{{item.title}} <span @click="del(index)">删除</span> </li>
        </ul>
      </div>
    </div>

    <!-- 弹窗 -->
    <div class="pop-up">
      <a-modal :visible="isShow" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
        <div class="top">
          <h3>相关文件列表</h3>
        </div>
        <div class="centre">
          <ul v-for="(item,index) in list" :key="index">
            <li>{{item.title}} <span @click="dele(index)">删除</span>
            </li>
          </ul>
        </div>
        <div class="button">
          <div>
            <a-select default-value="one" style="width: 120px" @change="handleChange">
              <a-select-option value="one">
                收文1
              </a-select-option>
              <a-select-option value="tow">
                收文2
              </a-select-option>
              <a-select-option value="three">
                收文3
              </a-select-option>
            </a-select>
          </div>
          <div>
            <a-input style="width: 200px" />
          </div>
          <div>
            <a-button type="dashed" icon="search">
              查询
            </a-button>
            <a-button>Default</a-button>
          </div>
        </div>
        <div class="bot">
          <div class="top">
            <h3>请选择相关文件</h3>
          </div>
          <div>
            <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,onSelect }" :columns="columns" :data-source="data" />
          </div>
        </div>
      </a-modal>
    </div>

  </div>
</template>

<script>
import data from '../../data.json'
const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    width: '50%'
  },
  {
    title: '登记人',
    dataIndex: 'creator'
  },
  {
    title: '登记部门',
    dataIndex: 'department'
  },
  {
    title: '登记时间',
    dataIndex: 'time'

  }
]
export default {
  data () {
    return {
      columns,
      data,
      isShow: false,
      confirmLoading: false,
      selectedRowKeys: [],
      list: [],
      lists: []
    }
  },
  methods: {
    del (i) {
      this.selectedRowKeys.splice(i, 1)
      this.list.splice(i, 1)
    },
    dele (i) {
      this.selectedRowKeys.splice(i, 1)

      this.list.splice(i, 1)
    },
    // 弹窗
    pop () {
      this.isShow = true
    },
    // 确定
    handleOk () {
      this.lists = this.list
      this.isShow = false
    },
    // 取消
    handleCancel () {
      this.isShow = false
    },
    // 下拉框
    handleChange (value) {
      console.log(`selected ${value}`)
    },
    start () {
      this.loading = true
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false
        this.selectedRowKeys = []
      }, 1000)
    },
    onSelectChange (selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    onSelect (record, selected) {
      if (selected) {
        this.list.push(record)
      } else {
        this.list.splice(this.list.indexOf(record), 1)
      }
    }
  }

}
</script>

<style lang="less" >
span {
  cursor: pointer;
}
.box {
  li {
    list-style: none;
    font-size: 24px;
  }
}
.abc {
  margin-right: 50%;

  .ant-breadcrumb {
    font-size: 22px;
    color: blue;
    cursor: pointer;
  }
}

.ant-breadcrumb > span:last-child {
  color: blue;
}
.ant-modal-content {
  transform: translateX(-30%);
  width: 310%;
  height: 100%;
}
.ant-modal-body {
  .top {
    margin-bottom: 15px;
    h3 {
      margin-top: 20px;
      border: 1px solid #000;
      text-align: center;
      color: red;
      font-weight: 800;
    }
    width: 100%;
    height: 30px;
    line-height: 30px;
  }
}
.button {
  display: flex;
  flex-direction: row;
  padding-left: 65%;
  div {
    margin-left: 10px;
    .ant-btn {
      margin-left: 10px;
    }
  }
}
.ant-table-thead {
  text-align: center;
}
</style>
